<template>
  <div class="class-create-root">

    <!-- @closed 窗口关闭时结束时的回调   -->
    <el-drawer v-model="dialogStatus" title="***班成绩录入" size="950"
               @closed="closeDialog"
               style="text-align: center;font-weight:bold;"
    >
      <div class="select-date">
        <el-date-picker
            v-model="attendanceDate"
            type="date"
            placeholder="请选择考试日期"
            :size="size"
        />
      </div>

      <el-table :data="tableData" style="width: 100%;">
        <el-table-column fixed prop="name" label="学员姓名" width="80" />
        <el-table-column fixed="right" label="考试类型" min-width="120">
          <template #default>
            <el-select
                v-model="attendanceStatus"
                placeholder="选择考试类型"
                size="large"
                style="width: 140px"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="输入分数" min-width="350">
          <template #default>
            <el-input v-model="inputValue" style="width: 450px" placeholder="请输入本次考试分数" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="50">
          <template #default>
            <el-button link type="primary" size="small" @click="">确定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

const tableData =[
  {
    name: '丞相丞相',
    age: 18,
    sex: '男',
    phone: '12345678911',
    email: 'zjingyang@sina.com',
    school: '中国政法大学',
    school_type: '全日制本科',
    major: '计算机科学与技术',
    graduation_date: '2023-06-06',
    has_graduation_cert: '是',
    contact_person_phone: '12345678911',
    is_monitor:"是",
  },
  {
    name: '丞相丞相',
    age: 18,
    sex: '男',
    phone: '12345678911',
    email: 'zjingyang@sina.com',
    school: '中国政法大学',
    school_type: '全日制本科',
    major: '计算机科学与技术',
    graduation_date: '2023-06-06',
    has_graduation_cert: '是',
    contact_person_phone: '12345678911',
    is_monitor:"是",
  },
]



const props = defineProps({
  dialogFormVisible: Boolean
})
const dialogStatus = ref(props.dialogFormVisible)
const emit = defineEmits(['closeFormVisible'])
const closeDialog = ()=>{
  emit('closeFormVisible', false)
}

// 监听父组件传递的 `dialogFormVisible` 变化
watch(() => props.dialogFormVisible, (newValue) => {
  // 如果需要在变化时执行一些逻辑，可以在这里添加，这里只把关闭的值传进去，相当于状态值转一圈来控制对话框的打开和关闭
  dialogStatus.value = newValue;
});

const formLabelWidth = '70px'
// 日期控件的大小
const size = "default";
// 日期绑定的变量，获取今天的日期为默认值
let today = new Date();
let year = today.getFullYear();
let month = (today.getMonth() + 1).toString().padStart(2, '0');  // 例如：1 -> '01'
let day = today.getDate().toString().padStart(2, '0');  // 例如：1 -> '01'
let todayStr = `${year}-${month}-${day}`;
const attendanceDate=ref(todayStr)

// 考勤状态
const attendanceStatus = ref("")
const options = [
  {
    value: '晨测',
    label: '晨测',
  },
  {
    value: '周测',
    label: '周测',
  },
  {
    value: '阶段考试',
    label: '阶段考试',
  },
  {
    value: '毕业考试',
    label: '毕业考试',
  },
]
// 备注输入的值
const inputValue = ref("")

</script>

<style scoped lang="less">
.class-create-root {
  .select-date {
    text-align: left;
    margin: 10px;
  }
}
</style>